<template>
  <view class="base-info">
    <view class="title">个人信息</view>
    <view class="form">
      <form class="form-container">
        <view class="form-item">
          <text class="required-icon">*</text>
          <text class="label">姓名</text>
          <input
            class="input-field"
            placeholder="请填写姓名"
            v-model="form.iname"
            @blur="validate('iname', 'nameError')"
          />
          <text v-if="nameError" class="error-message">*请填写姓名</text>
        </view>

        <view class="form-item">
          <text class="required-icon">*</text>
          <text class="label">出生日期</text>
          <view class="placeholder" :class="form.bday? 'active' : ''" @click="handleShowPicker">
            {{ form.bday || '请选择出生日期' }}
          </view>
          <text v-if="bdayError" class="error-message">*请选择出生日期</text>
        </view>

        <view class="form-item">
          <text class="required-icon">*</text>
          <text class="label">学历</text>
          <input
            class="input-field"
            placeholder="请填写学历"
            v-model="form.edu"
            @blur="validate('edu', 'eduError')"
          />
          <text v-if="eduError" class="error-message">*请填写学历</text>
        </view>

        <view class="form-item">
          <text class="required-icon">*</text>
          <text class="label">籍贯</text>
          <input
            class="input-field"
            placeholder="请填写籍贯"
            v-model="form.hkaName"
            @blur="validate('hkaName', 'hkaNameError')"
          />
          <text v-if="hkaNameError" class="error-message">*请填写籍贯</text>
        </view>
      </form>
    </view>
    <u-picker
      class="form-time"
      mode="time"
      v-model="showTime"
      :params="timeParams"
      :start-year="timeStart"
      :end-year="timeEnd"
      :default-time="defaultTime || ''"
      @confirm="handleConfirm"
      @close="handlePickerClose"
    ></u-picker>
  </view>
</template>
<script>
import { formatTime } from '@/utils/handle';
export default {
  props: {
    info: {
      type: Object,
      default: () => ({}),
    }
  },
  data() {
    return {
      form: {
				iname: '',
				bday: '',
				edu: '',
        hkaName: ''
			},
      rules: {
        iname: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        bday: [{ required: true, message: '请输入出生日期', trigger: 'change' }],
        edu: [{ required: true, message: '请输入学历', trigger: 'blur' }],
        hkaName: [{ required: true, message: '请输入籍贯', trigger: 'blur' }]
      },
      nameError: false,
      bdayError: false,
      eduError: false, 
      hkaNameError: false, 
      showTime: false,
      timeParams: {
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false,
      },
      timeStart: new Date().getFullYear() - 70,
      timeEnd: 2100,
      defaultTime: '',
    }
  },
  watch: {
    info: {
      handler(newVal, oldVal) {
        this.form.iname = newVal.iname;
        this.form.bday = newVal.bday;
        this.form.edu = newVal.edu;
        this.form.hkaName = newVal.hkaName;
      },
      deep: true,
      immediate: true,
    }
  },
  methods: {
    // 统一校验方法
    validate(fieldName, errorField) {
      if (!this.form[fieldName]) {
        this[errorField] = true;
      } else {
        this[errorField] = false;
      }
    },
    validateAll() {
      // 校验所有字段
      this.validate('iname', 'nameError');
      this.validate('bday', 'bdayError');
      this.validate('edu', 'eduError');
      this.validate('hkaName', 'hkaNameError');
      if (this.nameError || this.bdayError || this.eduError || this.hkaNameError) {
        return false;
      } else {
        this.$emit('submit', this.form);
        return true;
      }
    },
    handleConfirm(e) {
      this.form.bday = `${e.year}-${e.month}-${e.day}`;
      this.showTime = false;
    },
    exportData() {
      this.$emit('submit', this.form);
    },
    handleShowPicker() {
      this.defaultTime = this.form.bday || formatTime(new Date(), "yyyy-MM-dd");
      this.showTime = true;
    }
  },
}
</script>
<style lang="scss" scoped>
.base-info {
  background-color: #ffffff;
  border-radius: 30rpx;
  padding: 32rpx 32rpx 1px 32rpx;
  box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.05);
  
  .title {
    font-weight: 500;
    font-size: 36rpx;
    color: #222222;
  }
}
.form {
  padding-top: 50rpx;
}

.form-item {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 54rpx;
  padding-bottom: 28rpx;
  border-bottom: 1px solid #e0e0e0;
}

.label {
  width: 100px;
  font-size: 28rpx;
}

.required-icon {
  color: #F04646;
}

.placeholder {
  flex: 1;
  font-size: 28rpx;
  padding-left: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #999;

  &.active {
    color: #222;
  }
}

.error-message {
  position: absolute;
  bottom: -44rpx;
  right: 0;
  color: #F04646;
  font-size: 28rpx;
  margin-left: 10px;
}

.input-field {
  flex: 1;
  padding-left: 10px;
  font-size: 28rpx;
  text-align: right;
}
</style>